body, h2 { margin: 0; }
body { font-family: "Helvetica Neue", Helvetica, 'microsoft yahei', STHeiTi, sans-serif; color:#fff; background:#1f2e3d; }
html, body { height: 100%; min-width: 1024px; overflow: hidden; }
ul, ol { list-style:none; margin: 0; padding: 0; }
.container { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.content { height: 200%; position: absolute; left: 0; right: 0; }
.scene { height: 50%; position: relative; overflow: hidden; }

.scene-in { max-width:1224px; min-width: 1024px; height: 100%; position: relative; margin: 0 auto; }

.scene-down { width:53px; height:30px; position:absolute; bottom: 5%; left:50%; margin-left:-26px; text-indent:-999px; background:url(https://combo.b.qq.com/account/hrtx/images/active/new-year-2015/icon-down.png) no-repeat; overflow:hidden; }
.scene-down:hover { opacity:0.88; }


.scene-down {
	-webkit-transition: all .35s;
	transition: all .35s;
}

.scene-images {
	width: 50%; height: 420px; position: absolute; top: 50%; margin-top: -210px;
}
.scene-images img, .animate {
	position: absolute;
}
.scene-images .animate img { position: static; }
.scene-texts {
	height: 100%; position: relative; text-align: center;
}
.scene-vertical {
	display: inline-block; *display: inline; *zoom: 1; max-width: 99%; vertical-align: middle; text-align: left;
}
.scene-vertical + i {
	display: inline-block; width: 0; height: 100%; vertical-align: middle;
}
.scene-title { 
	font-weight:400; font-size:44px;
	-webkit-animation: scene-fadeup 800ms both;
	animation: scene-fadeup 800ms both;	
}
.scene-desc { 
	font-size: 20px;
	-webkit-animation: scene-fadeup 800ms 200ms both;
	animation: scene-fadeup 800ms 200ms both;
}
p.scene-desc { font-size: 18px; line-height: 2; }
.scene-list { 
	font-size: 18px;
	-webkit-animation: scene-fadeup 800ms 400ms both;
	animation: scene-fadeup 800ms 400ms both;
}
.scene-list li { margin-top: 15px; }
.scene-in strong { font-weight:700; color:#ffe678; }

img,
.animate,
.scene-title,
.scene-desc,
.scene-list,
.scene-person {
	-webkit-animation-play-state: paused!important;
	animation-play-state: paused!important;
}
.active img, 
.active .scene-title, 
.active .scene-desc, 
.active .scene-list,
.active .scene-person,
.active .animate {
	-webkit-animation-play-state: running!important;
	animation-play-state: running!important;
}

@-webkit-keyframes scene-fadeup {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
}
@keyframes scene-fadeup {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
}

/* scene-2 */
#scene2 { background:#1ec868; }
#scene2 .scene-images { 
	 right: 60px;
}
#scene2 .scene-texts {
	width: 40%; padding-left: 40px; text-align: left;
}

.scene2-bg { 
	left: 0; top: 229px;
}
.scene2-cloud1 { 
	left: 399px; top: 0;
	-webkit-animation: scene2-cloud 30s both infinite;
	animation: scene2-cloud 30s both infinite;
}
.scene2-cloud2 { 
	left: 166px; top: 203px;
	-webkit-animation: scene2-cloud 32s 2s both infinite;
	animation: scene2-cloud 32s 2s both infinite;
}
.scene2-cloud3 { 
	left: 258px; top: 60px; width: 339px; height: 335px;
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
	-webkit-animation: scene2-kl 1.8s both;
	animation: scene2-kl 1.8s both;
}
.scene2-egg1 { 
	left: 96px; bottom: 69px;
}
.scene2-egg2 { 
	left: 235px; bottom: 6px;
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
	-webkit-animation: scene2-egg2 2s both;
	animation: scene2-egg2 2s both;
}
.scene2-egg2 img {
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
	-webkit-animation: shake 4s 2s both infinite;
	animation: shake 4s 2s both infinite;
}
.scene2-line { 
	left: 227px; bottom: 47px;
	-webkit-animation: shake 4s 2s both infinite;
	animation: shake 4s 2s both infinite;
	visibility: hidden;
	-webkit-transition: visibility .1s 1.9s;
	transition: visibility .1s 1.9s;
}
.active .scene2-line {
	visibility: visible;
}
.scene2-boy { 
	left: 77px; bottom: 47px;
	-webkit-animation: scene-fadeup 0.6s both;
	animation: scene-fadeup 0.6s both;
}
.scene2-stone { 
	left: 82px; bottom: 0;
}
.scene2-2 { 
	width:24px; height:24px; position:absolute; left: 73px; top: 49px; 
	background:url(https://combo.b.qq.com/account/hrtx/images/active/new-year-2015/scene2-2.png) no-repeat;
	-webkit-animation: eyemove 4s 2s both infinite;
	animation: eyemove 4s 2s both infinite;
}
@-webkit-keyframes scene2-kl {
	0% {
		opacity: 0;
		-webkit-transform: translateX(700px) rotate(70deg);
	}
	70% {
		opacity: 1;
		-webkit-transform: translateX(-1%) rotate(-15deg);
	}
	90% {
		opacity: 1;
		-webkit-transform: rotate(3deg);
	}
}
@keyframes scene2-kl {
	0% {
		opacity: 0;
		transform: translateX(700px) rotate(70deg);
	}
	70% {
		opacity: 1;
		transform: translateX(-1%) rotate(-15deg);
	}
	90% {
		opacity: 1;
		transform: rotate(3deg);
	}
}
@-webkit-keyframes scene2-egg2 {
	70% {
		-webkit-transform: rotate(0deg);
	}
	90% {
		-webkit-transform: rotate(-5deg);
	}
}
@keyframes scene2-egg2 {
	70% {
		transform: rotate(0deg);
	}
	90% {
		transform: rotate(-5deg);
	}
}

@-webkit-keyframes scene2-cloud {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-400px);
	}
	50% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateX(400px);
	}
}
@keyframes scene2-cloud {
	0% {
		opacity: 0;
		transform: translateX(-400px);
	}
	50% {
		opacity: 1;
		transform: translateX(0);
	}
	100% {
		opacity: 0;
		transform: translateX(400px);
	}
}
@-webkit-keyframes eyemove {
	0%, 100% {
		-webkit-transform: translate(-3px, -5px);
	}
	20%, 40% {
		-webkit-transform: translate(0);
	}
}
@keyframes eyemove {
	0%, 100% {
		transform: translate(-3px, -5px);
	}
	20%, 40% {
		transform: translate(0);
	}
}
@-webkit-keyframes shake {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  1.25%, 2.5% {
    -webkit-transform: scale3d(.98, .98, .98) rotate3d(0, 0, 1, -1deg);
            transform: scale3d(.98, .98, .98) rotate3d(0, 0, 1, -1deg);
  }

  3.75%, 6.25%, 8.75%, 11.25% {
    -webkit-transform: scale3d(1.01, 1.01, 1.01) rotate3d(0, 0, 1, 1deg);
            transform: scale3d(1.01, 1.01, 1.01) rotate3d(0, 0, 1, 1deg);
  }

  5%, 7.5%, 10% {
    -webkit-transform: scale3d(1.01, 1.01, 1.01) rotate3d(0, 0, 1, -1deg);
            transform: scale3d(1.01, 1.01, 1.01) rotate3d(0, 0, 1, -1deg);
  }

  12.5% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes shake {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  1.25%, 2.5% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  3.75%, 6.25%, 8.75%, 11.25% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, 3deg);
  }

  5%, 7.5%, 10% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, -3deg);
  }

  12.5% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes slideDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-100%);
	}
}
@keyframes slideDown {
	0% {
		opacity: 0;
		transform: translateY(-100%);
	}
}

.scene-person { margin-top: 60px; margin-top: 6vh; padding-bottom: 40px; -webkit-animation: slideDown 800ms both; animation: slideDown 800ms both; }
.scene-person li { display:inline-block; *display: inline; *zoom: 1; width:116px; position:relative; margin:0 36px; }
.scene-person img { width:100px; height: 100px; border:8px solid #fbbf57; border-radius:100px; background-color: #fff; vertical-align: bottom; }
.scene-person span { display:block; width:100%; position:absolute; bottom:-24px; left:0; color:#fff; line-height:30px; background:#3d7fe3; font-size: 20px; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; }


.scene-space > div {
	position: absolute; left: 50%;
}

@-webkit-keyframes tinyRotate {
	0% {
		-webkit-transform: rotate(-5deg);
	}
	100% {
		-webkit-transform: rotate(5deg);
	}
}
@keyframes tinyRotate {
	0% {
		transform: rotate(5deg);
	}
	100% {
		transform: rotate(5deg);
	}
}


/* scene-8 */
#scene8 { background:#1f2e3d; text-align: center; }
#scene8 .scene-person img { border-color: #31d19e; }
#scene8 .scene-desc { width: 80%; margin-left: auto; margin-right: auto; color: #d6ebff; line-height: 1.8; }
#scene8 .scene-space { height: 384px; position: relative; }
#scene8 .scene-vertical { text-align: center; position: relative; overflow: hidden; }
.scene8-1 { margin-top: 34px;margin-bottom: 8px; }
#scene8 .scene-space > div:not(.scene8-18) {
	-webkit-animation: fadeIn .6s both;
	animation: fadeIn .6s both;
}
.scene8-6 {
	top: 33px; margin-left: -104px;
}
.scene8-12 {
	top: 86px; margin-left: -144px;
}
.scene8-12 img {
	-webkit-transform-origin: 100% 50%; transform-origin: 100% 50%;
	-webkit-animation: tinyRotate 1s 0.6s both infinite alternate;
	animation: tinyRotate 1s 0.6s both infinite alternate;
}
.scene8-13 img {
	-webkit-transform-origin: 0% 0%; transform-origin: 0% 0%;
	-webkit-animation: tinyRotate 1s both infinite alternate;
	animation: tinyRotate 1s both infinite alternate;
}
.scene8-13 {
	top: 98px; margin-left: -51px;
}
.scene8-14 {
	top: 150px; margin-left: -93px;
}
.scene8-15 {
	top: 150px; margin-left: -69px;
}
.scene8-16 {
	top: 58px; margin-left: 22px;
}
.scene8-16 img {
	-webkit-animation: tinyY 1s both infinite linear alternate;
	animation: tinyY 1s both infinite linear alternate;
}
.scene8-17 {
	top: 196px; margin-left: 49px;
}
.scene8-17 img {
	-webkit-transform-origin: 50% 0; transform-origin: 50% 0;
	-webkit-animation: tinyYScale 1s both infinite linear alternate;
	animation: tinyYScale 1s both infinite linear alternate;
}
.scene8-18 {
	top: 116px; margin-left: -170px;
	-webkit-animation: fadeIn .1s both;
	animation: fadeIn .1s both;
}
.scene8-19 {
	top: 207px; margin-left: -57px;
}
.scene8-19 img {
	-webkit-animation: tinyX 1s 1.1s both infinite linear alternate;
	animation: tinyX 1s 1.1s both infinite linear alternate;
}
.scene8-20 {
	top: 195px; margin-left: -76px;
}
.scene8-20 img {
	-webkit-animation: tinyX 1s .6s both infinite linear alternate;
	animation: tinyX 1s .6s both infinite linear alternate;
}

@-webkit-keyframes tinyY {
	0% {
		-webkit-transform: translateY(-5px);
	}
	100% {
		-webkit-transform: translateY(5px);
	}
}
@keyframes tinyY {
	0% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(5px);
	}
}
@-webkit-keyframes tinyX {
	0% {
		-webkit-transform: translateX(-5px);
	}
	100% {
		-webkit-transform: translateX(5px);
	}
}
@keyframes tinyX {
	0% {
		transform: translateX(-5px);
	}
	100% {
		transform: translateX(5px);
	}
}
@-webkit-keyframes tinyYScale {
	0% {
		opacity: .9;
		-webkit-transform: translateY(-5px) scale(.9,.8);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(5px) scale(1);
	}
}
@keyframes tinyYScale {
	0% {
		opacity: .9;
		transform: translateY(-5px) scale(.9,.8);
	}
	100% {
		opacity: 1;
		transform: translateY(5px) scale(1);
	}
}


/* scene index */
.scene-ctrl { position:fixed; top:50%; right:20px; margin-top:-140px; }
.scene-ctrl a { display:block; width:20px; height:20px; margin:10px 0; background:url(https://combo.b.qq.com/account/hrtx/images/active/new-year-2015/bg-scene-ctrl.png) no-repeat center; font: 0/0 a; color: transparent; }
.scene-ctrl .cur { background-image:url(https://combo.b.qq.com/account/hrtx/images/active/new-year-2015/bg-scene-ctrl-cur.png); }

@media screen and (max-width: 1024px) {
	.scene-ctrl {
		visibility: hidden;
	}
}

/* for mobile */
@media screen and (max-width: 640px) {
	html, body, .scene-in { min-width: 320px; }
	.hidden { display: none; }
	.scene-images { 
		width: 612px; position: absolute; bottom: 50%; left: 50%; top: auto;
		-webkit-transform-origin: bottom center;
		transform-origin: bottom center;
		-webkit-transform: translateX(-50%) scale(0.6);
		transform: translateX(-50%) scale(0.6);
	}
	.scene-down {
		-webkit-transform: scale(0.7, -0.7);
		transform: scale(0.7, -0.7);
		-webkit-animation: topFade 1.5s infinite;
		animation: topFade 1.5s infinite;
		bottom: 4%;
	}
	.scene-in {
		margin-top:15px;
	}
	.scene-texts {
		width: auto!important; height: auto; 
		position: absolute; bottom: 0; left: 0; right: 0; top: 50%; 
		padding: 30px 3px 60px 10px;
	}
	#scene2 .scene-texts {
		padding-top: 45px;
	}
	.scene-texts .scene-vertical + i {
		display: block;
	}
	.scene-texts .scene-title {
		font-size: 28px;
	}
	.scene-texts .scene-desc {
		font-size: 18px; line-height: 1.8;
	}

	.scene-list li {
		margin-top: 10px; font-size: 16px;
	}

	#scene2 .scene-texts {
		padding-left: 10px; text-align: center;
	}
	
	p.scene-desc { font-size: 16px; }
	.scene-person li {
		width: 72px; margin: 0 10px; padding:0 4px;
	}
	.scene-person li img { width: 50px; height: 50px; border-width: 4px; }
	.scene-person span { font-size: 14px; line-height: 20px; bottom: -18px; }
	.scene-space {
		-webkit-transform: scale(0.6);
		transform: scale(0.6);
	}
	#scene8 .scene-space {
		height: 192px;
	}
	.scene8-1 { width: 260px; margin-top: 2px;}
}
@media screen and (max-width: 375px) {
	.scene-images {
		-webkit-transform: translateX(-50%) scale(0.5);
		transform: translateX(-50%) scale(0.5);
	}
	.scene-down {
		-webkit-transform: scale(0.5, -0.5);
		transform: scale(0.5, -0.5);
	}
	.scene-texts {
		padding: 20px 7px 40px 10px;
	}
	#scene2 .scene-texts {
		padding-top: 35px;
	}
	.scene-texts .scene-title {
		font-size: 24px;
	}
	.scene-texts .scene-desc {
		font-size: 15px;
	}
	.scene-list li {
		margin-top: 10px; font-size: 14px;
	}
	.scene8-1 { width: 223px; margin-top: 2px;}
	p.scene-desc { font-size: 14px; }
	.scene-space {
		-webkit-transform: scale(0.5) translateY(-50%);
		transform: scale(0.5) translateY(-50%);
	}
}

@-webkit-keyframes topFade {
	90%, 100% {
		opacity: 0;
		bottom: 6%;
	}
}
@keyframes topFade {
	90%, 100% {
		opacity: 0;
		bottom: 6%;
	}
}